<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
				initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/class.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="css/slider.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="class">
			<div style="height:auto;" class="swiper-container">
				<div class="swiper-wrapper">
					<!-- 下面是4个不同颜色的轮播滑块 -->
					<div class="swiper-slide sw"><img src="img/课程/banner@2x.png"></div>
					<div class="swiper-slide sw"><img src="img/课程/banner@2x.png"></div>
					<div class="swiper-slide sw"><img src="img/课程/banner@2x.png"></div>
					<div class="swiper-slide sw"><img src="img/课程/banner@2x.png"></div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			<script type="text/javascript">
				var mySwiper = new Swiper('.swiper-container', { //初始化Swiper
					autoplay: { //自动切换
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: false,

					},
					navigation: { //前进后退
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',

					},
					pagination: { //分页器
						el: '.swiper-pagination',
						clickable: true,

					},
					loop: true, //循环

				})
			</script>
			
			<p class="ppp container"><span style="font-size: 0.533333rem;">公开课</span><span style="font-size: 0.32rem;color: #eee;"><a style="color: #989898;">查看全部></a></span></p>
			
			
			<div class="swiper mySwiper container shodw"style="margin-bottom: 0.8rem;" >
				<div class="swiper-wrapper">
					<div class="swiper-slide sw1">
						<img src="img/课程/500577327@2x.png" >
						<div class="ddd">
							<p>礼仪妆容形象管理课程<span>共5节</span></p>
							<p>来自千图网平台<span>1.2万次播放</span></p>
						</div>
					</div>
					<div class="swiper-slide sw1">
						<img src="img/课程/500577327@2x.png" >
						<div class="ddd">
							<p><span>共5节</span></p>
							<p>来自千图网平台<span>1.2万次播放</span></p>
						</div>
					</div>
					<div class="swiper-slide sw1">
						<img src="img/课程/500577327@2x.png" >
						<div class="ddd">
							<p><span>共5节</span></p>
							<p>来自千图网平台<span>1.2万次播放</span></p>
						</div>
					</div>
					<div class="swiper-slide sw1">
						<img src="img/课程/500577327@2x.png" >
						<div class="ddd">
							<p><span>共5节</span></p>
							<p>来自千图网平台<span>1.2万次播放</span></p>
						</div>
					</div>
				</div>
			</div>

			<!-- Swiper JS -->
			<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>

			<!-- Initialize Swiper -->
			<script>
				var swiper = new Swiper(".mySwiper", {
					slidesPerView: 1.8,
					spaceBetween: 30,
				});
			</script>
			
			<p class="ppp container"><span style="font-size: 0.533333rem;">热门推荐</span><span style="font-size: 0.32rem;color: #eee;"><a style="color: #989898;">查看全部></a></span></p>	
			
			<div class="figure container">
				<p class="rrr"></p>
				<img src="img/课程/500577327@2x(1).png" >
				<div>
					<p>生活实用心理学课程，教你轻松应对生活难题</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;">生活中的实用宝典</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;margin: 0.186666rem 0;">共30讲</p>
					<p><span style="color: #fd8a23;">￥198</span><span style="font-size: 0.266666rem;">120人已订阅</span></p>
				</div>
			</div> 
			<div class="figure container">
				<p class="rrr r"></p>
				<img src="img/课程/501025475@2x.png" >
				<div>
					<p>生活实用心理学课程，教你轻松应对生活难题</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;">生活中的实用宝典</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;margin: 0.186666rem 0;">共30讲</p>
					<p><span style="color: #fd8a23;">￥198</span><span style="font-size: 0.266666rem;">120人已订阅</span></p>
				</div>
			</div> 
			<div class="figure container">
				<p class="rrr rr"></p>
				<img src="img/课程/500577327@2x(1).png" >
				<div>
					<p>生活实用心理学课程，教你轻松应对生活难题</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;">生活中的实用宝典</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;margin: 0.186666rem 0;">共30讲</p>
					<p><span style="color: #fd8a23;">￥198</span><span style="font-size: 0.266666rem;">120人已订阅</span></p>
				</div>
			</div> 
			<div class="figure container">
				<p class="rrr rrrr"></p>
				<img src="img/课程/501025475@2x.png" >
				<div>
					<p>生活实用心理学课程，教你轻松应对生活难题</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;">生活中的实用宝典</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;margin: 0.186666rem 0;">共30讲</p>
					<p><span style="color: #fd8a23;">￥198</span><span style="font-size: 0.266666rem;">120人已订阅</span></p>
				</div>
			</div> 
			<div class="figure container">
				<p class="rrr t"></p>
				<img src="img/课程/501025475@2x.png" >
				<div>
					<p>生活实用心理学课程，教你轻松应对生活难题</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;">生活中的实用宝典</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;margin: 0.186666rem 0;">共30讲</p>
					<p><span style="color: #fd8a23;">￥198</span><span style="font-size: 0.266666rem;">120人已订阅</span></p>
				</div>
			</div> 
			<div class="figure container">
				<p class="rrr tt"></p>
				<img src="img/课程/501025475@2x.png" >
				<div>
					<p>生活实用心理学课程，教你轻松应对生活难题</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;">生活中的实用宝典</p>
					<p style="font-size: 0.32rem;color: #a8a8a8;margin: 0.186666rem 0;">共30讲</p>
					<p><span style="color: #fd8a23;">￥198</span><span style="font-size: 0.266666rem;">120人已订阅</span></p>
				</div>
			</div>
			<ul class="footer">
				<li><a href="#"><span><img src="img/sy.png" ></span><span>首页</span></a></li>
				<li><a href="#"><span><img src="img/kc.png" ></span><span>课程</span></a></li>
				<li><a href="#"><span><img src="img/ht.png" ></span><span>话题</span></a></li>
				<li><a href="#"><span><img src="img/wd.jpg" ></span><span>我的</span></a></li>
			</ul>
		</div>
	</body>
</html>
